<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap彩色斑马线条纹进度条设计效果|DEMO-爱编程实例，分享jQuery、html5、css3等插件</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		 .demo{
			padding: 2em 0;
			background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
              }
              .progress{
                  height: 25px;
                  background: #262626;
                  padding: 5px;
                  overflow: visible;
                  border-radius: 20px;
                  border-top: 1px solid #000;
                  border-bottom: 1px solid #7992a8;
                  margin-top: 50px;
              }
              .progress .progress-bar{
                  border-radius: 20px;
                  position: relative;
                  animation: animate-positive 2s;
              }
              .progress .progress-value{
                  display: block;
                  padding: 3px 7px;
                  font-size: 13px;
                  color: #fff;
                  border-radius: 4px;
                  background: #191919;
                  border: 1px solid #000;
                  position: absolute;
                  top: -40px;
                  right: -10px;
              }
              .progress .progress-value:after{
                  content: "";
                  border-top: 10px solid #191919;
                  border-left: 10px solid transparent;
                  border-right: 10px solid transparent;
                  position: absolute;
                  bottom: -6px;
                  left: 26%;
              }
              .progress-bar.active{
                  animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
              }
              @-webkit-keyframes animate-positive{
                  0% { width: 0; }
              }
              @keyframes animate-positive{
                  0% { width: 0; }
              }
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>Bootstrap彩色斑马线条纹进度条设计效果 <span>A Bootstrap Progress Bar Style</span></h1>
			
		</header>
		<div class="demo">
	        <div class="container">
	            <div class="row">
	                <div class="col-md-offset-3 col-md-6">
	                    <div class="progress">
	                        <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 60%;">
	                            <div class="progress-value">60%</div>
	                        </div>
	                    </div>

	                    <div class="progress">
	                        <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 75%;">
	                            <div class="progress-value">75%</div>
	                        </div>
	                    </div>

	                    <div class="progress">
	                        <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 90%;">
	                            <div class="progress-value">90%</div>
	                        </div>
	                    </div>

	                    <div class="progress">
	                        <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 85%;">
	                            <div class="progress-value">85%</div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
		
	</div>
	
<script src="js/_gg_980_90.js" type="text/javascript"></script>
</body>
</html>